<!DOCTYPE html>
<html>
<head>
	<title>A simple example</title>
	<meta charset = "utf-8" />
    <link rel="stylesheet" href="basic.css">
</head>
<body>
	<header>
	<h1>网站一级标题</h1>
	<ul>
		<li><a href="imgs/1.jpg">导航链接一</a></li>
		<li><a href="imgs/1.jpg">导航链接二</a></li>
		<li><a href="imgs/1.jpg">导航链接三</a></li>
		<li><a href="imgs/1.jpg">导航链接四</a></li>
	</ul>  
    <div id = "logo">
        <img src = "imgs/Logo.jpg"/>
    </div>        
	</header>
	<article id="article1">
		<h1>文章一级标题</h1>
		<h2>文章二级标题</h2>
		<h3>文章作者  文章发表时间</h3>
		<p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，换行了</br>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<b>这里有个粗体字</b>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。</p>
		<p class="img"><img src="imgs/1.jpg"></p>
		<p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，换行了</br>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<b>这里有个粗体字</b>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<a href="http://ife.baidu.com" target = "_blank">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。</p>
	</article>

	<article id="article2">
		<h1>另一篇文章一级标题</h1>
		<h2>文章二级标题</h2>
		<h3>文章作者  文章发表时间</h3>
		<p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，换行了</br>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<b>这里有个粗体字</b>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。</p>
		<p class="img"><img src="imgs/1.jpg"></p>
		<ul>
			<li>列表项目一</li>
			<li>列表项目二</li>
			<li>列表项目三</li>
		</ul>
	</article>

	<article id="article3">
		<h1>图片</h1>
		<ul class="img">
			<li>马达加斯加的企鹅</br><img src="imgs/1.jpg"></li></br>
			<li>马达加斯加的企鹅</br><img src="imgs/2.jpg"></li></br>
			<li>马达加斯加的企鹅</br><img src="imgs/3.jpg"></li></br>
			<li>马达加斯加的企鹅</br><img src="imgs/4.jpg"></li></br>
			<li>马达加斯加的企鹅</br><img src="imgs/5.jpg"></li>
		</ul>
	</article>

	<article id="article4">
		<h1>最后一篇文章一级标题</h1>
		<h2>文章二级标题</h2>
		<h3>文章作者  文章发表时间</h3>
		<ol>
			<li>排名1</li>
			<li>排名2</li>
			<li>排名3</li>
		</ol>
		<table border = "1">
            <caption id="specialp">下面是一个表格，给表格加了一个border = "1"好让你看出是一个表格</caption><!--设置的表头-->
             <thead>
             	<tr>
             		<th>表头</th>
             		<th>表头</th>
             		<th>表头</th>
             	</tr>
             </thead>
             <tbody>
             	<tr>
             		<td>表内容单元格</td>
             		<td>表内容单元格</td>
             		<td><a href="" >操作</a></td>
             	</tr>
             	<tr>
             		<td>表内容单元格</td>
             		<td>表内容单元格</td>
             		<td><a href="" >操作</a></td>
             	</tr>
             	<tr>
             		<td>表内容单元格</td>
             		<td>表内容单元格</td>
             		<td><a href="" >操作</a></td>
             	</tr>
             </tbody>
             <tfoot>
             	<tr>
             		<td>总计</td>
             		<td colspan = "2">1000</td>
             	</tr>
             </tfoot>
		</table>
	</article>
	
	<div id="message">
		<h1>这里以后是一个侧栏，这是侧栏标题</h1>
		<h2>侧栏注册窗口标题</h2>
        <form id="form1">
        <div>
        	<label for="email">请输入邮箱地址</label>
        	<input type="text" name="email" id="email">
        	<p>邮箱地址请按要求格式输入</p>
        </div>
        </form>

        <form id="form2">
        <div>
        	<label for="passw">请输入密码</label>
        	<input type="password" name="passw" id="passw">
        </div>
        <div>
        	<label for="passw_same">请重复输入密码</label>
        	<input type="password" name="passw_same" id="passw_same">
        	<p>密码请为6-16位英文数字</p>
        </div>
        </form>

        <form id="form3">
        <div>
			<label>性别</label>
        	<input class="sex" type="radio" name="Sex" checked="checked">男
        	<input class="sex" type="radio" name="Sex">女
        </div>
        	<!--name属性用来区分数个单选框是否互斥，name相同的才互斥-->
            <!--label应把表单嵌套起来，才好区分label的指代，且好布局-->
            <!--label最好不要嵌套，否则不好对齐-->
            <!--区分label的指代，也可以用label的for属性，对应表单的id值-->
        <div>
        	<label for="city">城市 </label>
        	<select id="city">
        		<option>北京</option>
        		<option>上海</option>
        		<option>成都</option>
        		<option>南京</option>
        		<option>深圳</option>
        	</select>
        </div>
        <div>
        	<label>爱好</label>
        	<input type="checkbox" name="sports">运动
        	<input type="checkbox" name="art">艺术
        	<input type="checkbox" name="science">科学
        </div>
        <div id="descript">
        
        	<label class="tips">个人描述</label>

        	<textarea name="description" placeholder="这是一个多行输入框，输入您的个人描述"></textarea>
        </div>
        
        </form>
        <div id = "submit">
        <input type="submit" name="submit">
        </div>
	</div>
    <footer>
        <p><span>版权所有hh2o4ⓒ</span></p>
    </footer>
    
</body>
</html>